<!DOCTYPE html>
<html>

<head>
  <title>首页模板</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <script src="./js/bootstrap.bundle.min.js"></script>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.6/purify.min.js"></script>
</head>

<body>
<!-- 只有HTML代码和相对的标签 之后所有都由JS操作 -->
  <div class="container-fluid">

    <!-- 顶部导航开始 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">❤</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul id="dalei" class="navbar-nav me-auto mb-2 mb-lg-0">
            <!-- 导航文字 -->
          </ul>
        </div>
      </div>
    </nav>
    <nav>
      <!-- 搜索标签 -->
      <form class="d-flex mt-2 mb-2">
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
          <input id="skey" class="me-2" type="search" placeholder="Search" aria-label="Search">
          <button id="sbtn1" class="btn btn-outline-success me-md-2" type="submit">搜本站</button>
          <button id="sbtn2" class="btn btn-outline-success" type="submit">搜全站</button>
        </div>
      </form>
    </nav>
    <!-- 顶部导航结束 -->

    <!-- 侧边导航开始 -->
    <!--导航数据 json格式：使用json源数据格式 {type_id,type_name,type_pid,type_url} -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">网站选择</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div>
          你可以在这里选择你要浏览的网站。
        </div>
        <div class="dropdown mt-3">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
            网页抓取网站
          </button>
          <ul id="zhuazhan" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            抓取网站导航数据
          </ul>
        </div>
        <div class="dropdown mt-3">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
            JSON资源网站
          </button>
          <ul id="jsonzhan" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            JSON网站导航数据
          </ul>
        </div>
        <div class="dropdown mt-3">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
            XML资源网站
          </button>
          <ul id="xmlzhan" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            XML网站导航数据
          </ul>
        </div>
      </div>
    </div>
    <!-- 侧边导航结束 -->

    <!-- 卡片组开始 -->
    <div id="cards" class="row row-cols-3 row-cols-sm-6 g-4">
      <!-- 单张卡片 -->
    </div>
    <!-- 卡片组结束 -->

    <div id="textcard" class="row row-cols-2 p-2 mt-3 mb-4">
        <ul id="txt0" class="col-6 list-group">
            
        </ul>
        <ul id="txt1" class="col-6 list-group">
            
        </ul>
    </div>

    <div id="shoucang" class="row row-cols-3 row-cols-sm-6 g-4">
      <!-- 单张卡片 -->
    </div>
    <!-- 分页开始-->
    <div class="row bg-dark">
      <div class="col-4 text-center ">
        <p id="xinxi" class="text-primary m-3">收藏总数</p>
      </div>
      <div class="col-8">
        <ul id="fenye" class="pagination justify-content-end  mt-2 mb-2">
        </ul>
      </div>
    </div>
    <!--分页结束-->
  </div>
  <script src="fun.js"></script>
</body>

</html>